<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CH洗衣客系统 - 配送员中心</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#60A5FA'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<style>
body {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
min-height: 1024px;
}
.avatar {
width: 80px;
height: 80px;
object-fit: cover;
}
.status-indicator {
width: 12px;
height: 12px;
}
.stat-card {
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.menu-item {
transition: all 0.2s ease;
}
.menu-item:hover {
background-color: #F3F4F6;
}
.notification-dot {
width: 8px;
height: 8px;
}
.smooth-transition {
transition: all 0.3s ease;
}
</style>
</head>
<body class="bg-gray-50">
<div class="max-w-4xl mx-auto px-6 py-8 min-h-screen flex flex-col">
<!-- 顶部导航 -->
<header class="flex justify-between items-center mb-8">
<div class="flex items-center">
<a href="index.html" class="text-2xl font-bold text-primary font-['Pacifico']">CH洗衣客</a>
<span class="ml-4 text-gray-500">配送员中心</span>
</div>
<div class="flex items-center space-x-4">
<a href="index.html" class="flex items-center text-gray-600 hover:text-primary smooth-transition">
<i class="fas fa-home text-lg"></i>
</a>
<button class="flex items-center text-gray-600 hover:text-primary smooth-transition">
<i class="fas fa-bell text-lg"></i>
<span class="notification-dot bg-red-500 rounded-full ml-1"></span>
</button>
</div>
</header>
<!-- 个人信息区 -->
<section class="bg-white rounded-xl shadow-sm p-6 mb-8">
<div class="flex items-center">
<div class="relative">
<img src="https://ai-public.mastergo.com/ai/img_res/ad264806b01a1387910d00b1b05f841c.jpg"
alt="配送员头像"
class="avatar rounded-full border-2 border-primary">
<button class="absolute bottom-0 right-0 bg-white p-1 rounded-full border border-gray-200 hover:bg-gray-100">
<i class="fas fa-camera text-sm text-gray-600"></i>
</button>
</div>
<div class="ml-6 flex-1">
<div class="flex items-center">
<h2 class="text-xl font-semibold text-gray-800">张伟</h2>
<span class="ml-4 text-gray-500">工号: DL20230045</span>
</div>
<div class="flex items-center mt-2">
<div class="status-indicator bg-green-500 rounded-full mr-2"></div>
<span class="text-gray-600">在线</span>
<button class="ml-4 text-sm text-primary hover:text-blue-700">切换状态</button>
</div>
<div class="mt-3 flex items-center">
<span class="text-sm text-gray-500">今日工作时长: 4小时28分钟</span>
<button class="ml-6 text-sm text-primary hover:text-blue-700 flex items-center">
<i class="fas fa-edit text-sm mr-1"></i>
<span>编辑资料</span>
</button>
</div>
</div>
</div>
</section>
<!-- 核心数据统计 -->
<section class="mb-8">
<h3 class="text-lg font-semibold text-gray-800 mb-4">工作数据</h3>
<div class="grid grid-cols-2 gap-4">
<div class="stat-card bg-white rounded-xl shadow-sm p-4 cursor-pointer">
<div class="flex justify-between items-center">
<div>
<p class="text-sm text-gray-500">今日配送单数</p>
<p class="text-2xl font-bold text-primary mt-1">18</p>
</div>
<div class="bg-blue-50 p-3 rounded-lg">
<i class="fas fa-truck text-primary text-xl"></i>
</div>
</div>
</div>
<div class="stat-card bg-white rounded-xl shadow-sm p-4 cursor-pointer">
<div class="flex justify-between items-center">
<div>
<p class="text-sm text-gray-500">本月配送单数</p>
<p class="text-2xl font-bold text-primary mt-1">156</p>
</div>
<div class="bg-blue-50 p-3 rounded-lg">
<i class="fas fa-calendar-alt text-primary text-xl"></i>
</div>
</div>
</div>
<div class="stat-card bg-white rounded-xl shadow-sm p-4 cursor-pointer">
<div class="flex justify-between items-center">
<div>
<p class="text-sm text-gray-500">好评率</p>
<p class="text-2xl font-bold text-primary mt-1">98.5%</p>
</div>
<div class="bg-blue-50 p-3 rounded-lg">
<i class="fas fa-star text-primary text-xl"></i>
</div>
</div>
</div>
<div class="stat-card bg-white rounded-xl shadow-sm p-4 cursor-pointer">
<div class="flex justify-between items-center">
<div>
<p class="text-sm text-gray-500">总完成订单</p>
<p class="text-2xl font-bold text-primary mt-1">1,245</p>
</div>
<div class="bg-blue-50 p-3 rounded-lg">
<i class="fas fa-check-circle text-primary text-xl"></i>
</div>
</div>
</div>
</div>
</section>
<!-- 功能模块列表 -->
<section class="mb-8 flex-1">
<h3 class="text-lg font-semibold text-gray-800 mb-4">功能中心</h3>
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<div class="menu-item p-4 border-b border-gray-100 flex items-center justify-between cursor-pointer">
<div class="flex items-center">
<div class="bg-blue-50 p-2 rounded-lg mr-4">
<i class="fas fa-clipboard-list text-primary text-lg"></i>
</div>
<span class="text-gray-800">我的订单</span>
</div>
<div class="flex items-center">
<span class="text-sm text-gray-400 mr-2">配送中/已完成/已取消</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
</div>
<div class="menu-item p-4 border-b border-gray-100 flex items-center justify-between cursor-pointer">
<div class="flex items-center">
<div class="bg-blue-50 p-2 rounded-lg mr-4">
<i class="fas fa-chart-line text-primary text-lg"></i>
</div>
<span class="text-gray-800">工作报表</span>
</div>
<div class="flex items-center">
<span class="text-sm text-gray-400 mr-2">收入统计/绩效统计</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
</div>
<div class="menu-item p-4 border-b border-gray-100 flex items-center justify-between cursor-pointer">
<div class="flex items-center">
<div class="bg-blue-50 p-2 rounded-lg mr-4">
<i class="fas fa-map-marked-alt text-primary text-lg"></i>
</div>
<span class="text-gray-800">配送区域设置</span>
</div>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
<div class="menu-item p-4 border-b border-gray-100 flex items-center justify-between cursor-pointer">
<div class="flex items-center">
<div class="bg-blue-50 p-2 rounded-lg mr-4">
<i class="fas fa-fingerprint text-primary text-lg"></i>
</div>
<span class="text-gray-800">考勤打卡记录</span>
</div>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
<div class="menu-item p-4 flex items-center justify-between cursor-pointer">
<div class="flex items-center">
<div class="bg-blue-50 p-2 rounded-lg mr-4">
<i class="fas fa-bell text-primary text-lg"></i>
</div>
<span class="text-gray-800">系统消息通知</span>
</div>
<div class="flex items-center">
<span class="notification-dot bg-red-500 rounded-full mr-2"></span>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
</div>
</div>
</section>
<!-- 底部功能区 -->
<footer class="mt-auto pt-6 border-t border-gray-200">
<div class="flex justify-between">
<div class="flex space-x-4">
<button class="text-gray-600 hover:text-primary smooth-transition flex items-center">
<i class="fas fa-cog text-lg mr-2"></i>
<span>系统设置</span>
</button>
<button class="text-gray-600 hover:text-primary smooth-transition flex items-center">
<i class="fas fa-lock text-lg mr-2"></i>
<span>账号安全</span>
</button>
<button class="text-gray-600 hover:text-primary smooth-transition flex items-center">
<i class="fas fa-headset text-lg mr-2"></i>
<span>客服支持</span>
</button>
</div>
<button class="text-red-500 hover:text-red-700 smooth-transition flex items-center" onclick="logout()">
<i class="fas fa-sign-out-alt text-lg mr-2"></i>
<span>退出登录</span>
</button>
</div>
<div class="mt-4 text-center text-sm text-gray-500">
<p>CH洗衣客系统 © 2023 版权所有</p>
</div>
</footer>
</div>
<script>
function logout() {
if(confirm('确定要退出登录吗？')) {
window.location.href = '../register.html';
}
}
document.addEventListener('DOMContentLoaded', function() {
// 状态切换功能
const statusToggle = document.querySelector('button:contains("切换状态")');
if (statusToggle) {
statusToggle.addEventListener('click', function() {
const statusIndicator = document.querySelector('.status-indicator');
const statusText = statusIndicator.nextElementSibling;
if (statusIndicator.classList.contains('bg-green-500')) {
statusIndicator.classList.remove('bg-green-500');
statusIndicator.classList.add('bg-gray-400');
statusText.textContent = '离线';
} else {
statusIndicator.classList.remove('bg-gray-400');
statusIndicator.classList.add('bg-green-500');
statusText.textContent = '在线';
}
});
}
// 头像点击放大
const avatar = document.querySelector('.avatar');
if (avatar) {
avatar.addEventListener('click', function() {
const overlay = document.createElement('div');
overlay.className = 'fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50';
const enlargedImg = document.createElement('img');
enlargedImg.src = this.src;
enlargedImg.className = 'max-w-3xl max-h-screen rounded-lg';
overlay.appendChild(enlargedImg);
overlay.addEventListener('click', function() {
document.body.removeChild(overlay);
});
document.body.appendChild(overlay);
});
}
// 统计卡片点击事件
const statCards = document.querySelectorAll('.stat-card');
statCards.forEach(card => {
card.addEventListener('click', function() {
// 这里可以添加跳转到详细统计页面的逻辑
console.log('跳转到详细统计页面');
});
});
// 菜单项点击事件
const menuItems = document.querySelectorAll('.menu-item');
menuItems.forEach(item => {
item.addEventListener('click', function() {
// 这里可以添加跳转到对应功能页面的逻辑
console.log('跳转到功能页面');
});
});
});
</script>
</body>
</html>
